<template>
  <uni-popup ref="popup" type="bottom" backgroundColor="#fff" @mask-click="handleConfirm">
    <view class="flex-col bg-white content-wrap">
      <view class="flex-row align-center justify-between"
            style="padding: 20rpx;">
        <text @click="handleReset">重置</text>
        <text @click="handleConfirm" class="text-blue">确定</text>
      </view>
      <view class="popup-content">

        <view class="lineBottom10 flex-col search-item">
          <text>处置状态</text>
          <view class="flex-row bottom10 flex-wrap">
            <uni-tag @click="statusClick(index,item)" :inverted="!item.check" :circle="true"
                     v-for="(item, index) in dict.type.disposal_status_type" :text="item.label"
                     :key="item.value"
                     type="success"/>
          </view>
        </view>

        <view class="lineBottom10 flex-col search-item">
          <text>车架号</text>
          <view style="margin: 10rpx 0">
            <uni-easyinput style="margin: 10rpx 0" type="text" v-model="ruleForm.vinNo"
                           placeholder="请输入车架号"/>
          </view>
        </view>

        <linkageSelect ref="refLinkageSelect" @change="handleLinkageSelect"/>

        <view class="lineBottom10 flex-col search-item">
          <text>排放标准</text>
          <view style="margin: 10rpx 0">
            <uni-easyinput style="margin: 10rpx 0" type="text" v-model="ruleForm.environmentalStandards"
                           placeholder="请输入排放标准"/>
          </view>
        </view>

        <view class="lineBottom10 flex-col search-item">
          <text>车况等级</text>
          <view style="margin: 10rpx 0">
            <zxz-uni-data-select v-model="ruleForm.vehicleConditionLevel"
                                 dataValue="value" dataKey="label" :clear="false" filterable
                                 :localdata="dict.type.vehicle_condition_level_type"/>
          </view>
        </view>

        <view class="lineBottom10 flex-col search-item">
          <text>车辆产权公司</text>
          <uni-easyinput style="margin: 10rpx 0" type="text" v-model="ruleForm.propertyRightName"
                         placeholder="请输入车辆产权公司"/>
        </view>

        <view class="lineBottom10 flex-col search-item">
          <text>申请人</text>
          <view style="margin: 10rpx 0">
            <uni-easyinput style="margin: 10rpx 0" type="text" v-model="ruleForm.proposer"
                           placeholder="请输入申请人"/>
          </view>
        </view>

        <view class="lineBottom10 flex-col search-item">
          <text>申请时间</text>
          <view style="margin: 10rpx 0">
            <uni-datetime-picker v-model="valueDate" type="daterange" @change="changeTime"/>
          </view>
        </view>

      </view>
    </view>
  </uni-popup>
</template>

<script>

export default {
  name: 'conditionSearch',//弹框搜索
  dicts: ['vehicle_condition_level_type', 'disposal_status_type'],
  props: {
    value: {
      type: Object,
      default: {}
    },
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
  },
  watch: {},
  data() {
    return {
      param: {},
      range: [],
      linkageList: [],
      valueDate: []
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    //打开弹框
    open() {
      this.$refs.popup.open()
    },

    //确定
    handleConfirm() {
      this.$emit('confirm', this.ruleForm)
      this.$refs.popup.close()
    },

    //重置
    handleReset() {
      this.$refs.refLinkageSelect.reset()
      this.dict.type.disposal_status_type.forEach(item => item.check = false)
      this.valueDate = []
      this.ruleForm.propertyRightName = ''
      this.ruleForm.environmentalStandards = ''
      this.$emit('reset')
    },

    //工单状态
    statusClick(index, val) {
      this.dict.type.disposal_status_type.forEach((item, i) => {
        if (index === i) {
          item.check = !item.check
        } else {
          item.check = false
        }
      })
      this.$set(this.ruleForm, 'disposalStatus', val.value)
      this.value.disposalStatus = this.ruleForm.disposalStatus = val.value
      this.$forceUpdate()
    },


    //品牌/车系/车型
    handleLinkageSelect(val) {
      this.$set(this.ruleForm, 'brandId', val.brandId)
      this.$set(this.ruleForm, 'seriesId', val.seriesId)
      this.$set(this.ruleForm, 'modelId', val.modelId)
      this.value.brandId = this.ruleForm.brandId = val.brandId
      this.value.seriesId = this.ruleForm.seriesId = val.seriesId
      this.value.modelId = this.ruleForm.modelId = val.modelId
    },

    //车辆产权公司
    // change(val) {
    //   this.$set(this.ruleForm, 'propertyRightId', val)
    //   this.value.propertyRightId = this.ruleForm.propertyRightId = val
    // },

    //申请时间
    changeTime(val) {
      if (val) {
        this.value.applicationStartTime = this.ruleForm.applicationStartTime = val[0]
        this.value.applicationEndTime = this.ruleForm.applicationEndTime = val[0]
        this.$set(this.ruleForm, 'applicationStartTime', val[0])
        this.$set(this.ruleForm, 'applicationEndTime', val[1])
      }
    }

  },
};
</script>

<style lang="scss" scoped>
.content-wrap {
  border-radius: 20rpx 20rpx 0 0
}

.search-item {
  padding: 0 20rpx 10rpx
}

uni-tag {
  margin: 20rpx 20rpx 10rpx 0
}

.popup-content {
  overflow: auto;
  max-height: 60vh;
}

</style>



